@import '~@wordpress/base-styles/breakpoints';
@import '~@wordpress/base-styles/mixins';

.promo-card {
	display: flex;
	flex-direction: column;
	@include breakpoint-deprecated( '>480px' ) {
		flex-direction: row;
	}

	.action-panel__figure {
		margin-top: 3px;

		@include breakpoint-deprecated( '>480px' ) {
			max-width: 24px;
			order: 1;

			&.align-left {
				order: -1;
			}
		}
	}

	.action-panel__title {
		display: flex;
		justify-content: space-between;
	}

	.action-panel__body {
		display: flex;
		flex-direction: column;
		flex-grow: 1;

		p {
			flex-grow: 1;
		}
	}

	&.is-primary {
		align-items: center;

		.action-panel__title {
			@extend .wp-brand-font;
			font-size: $font-title-small;
			line-height: 28px;
			margin-bottom: 8px;
		}

		@include breakpoint-deprecated( '>480px' ) {
			.action-panel__figure {
				display: block;
				max-width: 120px;
				margin-bottom: 0;
			}

			.action-panel__title {
				font-size: $font-title-medium;
				line-height: 32px;
			}

			.action-panel__body {
				font-size: $font-body;
				line-height: 24px;
			}
		}

		.action-panel__body {
			justify-content: center;
			width: 100%;
			p {
				flex-grow: 0;
				margin-bottom: 8px;
			}
		}

		@include break-xlarge {
			padding-left: 64px;
			padding-right: 64px;
		}

		@include breakpoint-deprecated( '>660px' ) {
			// illustration is too small to fit between 660 and 800px
			.action-panel__figure {
				display: none;
			}
		}

		@include breakpoint-deprecated( '>800px' ) {
			.action-panel__figure {
				display: block;
			}
		}
	}

	.action-panel__cta {
		.button {
			margin: 0 1em 4px 0;
		}
	}
	.promo-card__title-badge {
		background-color: var( --color-accent-60 );
		color: var( --color-text-inverted );
		margin: auto 0 auto 8px;
	}

	.promo-card__price {
		.price__cost {
			font-size: $font-body-small;
			color: var( --studio-gray-80 );

			span {
				font-size: $font-title-medium;
				color: var( --studio-gray-100 );
			}
		}

		.price__discounted span {
			text-decoration: line-through;
		}
		.price__discount {
			font-size: $font-body-small;
			color: var( --studio-green-50 );
			margin-left: 8px;
		}
	}
}
